<template>
	 <transition name="move">
	  <div class="food" v-show="showFlag"  ref="food">
	        <div class="food-content">
	        	<!--img-->
	        	<div class="image-header">
	        		<img :src="food.image" />
	        		<div class="back" @click.stop="hide">
	        			<i class="icon-arrow_lift"></i>
	        		</div>
	        		
	        	</div>
	            <!--name-->
	            <div class="content">
	            	<h1 class="title">{{food.name}}</h1>
	            	<div class="detail">
	            		<span class="sell-count">月售{{food.sellCount}}份</span>
	            		<span class="rating">好评率{{food.rating}}%</span>
	            	</div>
	            	<div class="price">
        	 			<span class="now">&yen;{{food.price}}</span><span class="old" v-show="food.oldPrice">&yen;{{food.oldPrice}}</span>
        	 		</div>
        	 		  <!--购物车-->
		            <div class="cartcontrol-wrapper">
		            	<cartcontrol :food="food"></cartcontrol>
		            </div>
		            <transition name="fde" >
		              <div @click.stop.prevent="addFirst($event)"  class="buy" v-show="!food.count || food.count===0" >加入购物车</div>
		            </transition>
	            </div>
	            <!--线条1-->
	             <split v-show="food.info"></split>
	            <!--text-->
	            <div class="info" v-show="food.info">
	            	<div class="title">商品信息</div>
	            	<div class="text">{{food.info}}</div>
	            </div>
	             <!--线条2-->
	             <split v-show="food.info"></split>
	             <div class="rating">
	             	<h1 class="title">商品评价</h1>
	             	<ratingselect :select-type="selectType" :only-content="onlyContent"
	             		:desc="desc" :ratings="food.ratings"></ratingselect>
	                <!--评论列表-->
	                <div class="rating-wrapper">
	                	<ul v-show="food.ratings && food.ratings.length">
	                		<li  v-show="needShow(rating.rateType,rating.text)"  v-for="rating in food.ratings" class="rating-item border-bottom">
	                			<div class="user">
	                				<span class="name">{{rating.username}}</span>
	                				<img :src="rating.avatar"  class="avatar" width="12"  height="12"/>
	                			</div>
	                			<div class="time">{{rating.rateTime | formatDate}}</div>
	                			<p class="text">
	                				<span :class="{'icon-thumb_up':rating.rateType===0, 'icon-thumb_down':rating.rateType===1}" ></span>{{rating.text}}
	                			</p>
	                		</li>
	                	</ul>
	                	<div class="no-rating" v-show="!food.ratings||!food.ratings.length">暂无评价</div>
	                </div>
	                
	             </div>
	        </div>	        
	  </div>
  	 </transition>
</template>

<script>
import Vue from 'vue'
import BScroll from 'better-scroll'
import  {formatDate} from '@/common/js/date.js'
import  cartcontrol from   '@/components/cartcontrol/cartcontrol'
import split from '@/components/split/split'
import ratingselect from '@/components/ratingselect/ratingselect'

const POSITYIVE=0;
const NEGATIVE=1;
const ALL=2;


export default {
  name: 'food',
  data () { 
    return {
    	 showFlag: false,
    	 selectType:ALL,
    	 onlyContent:true,
    	 desc:{
    	 	all:'全部',
    	 	positive:'推荐',
  		    negative:'吐槽'
    	 }
    }
  },
	props:{
		food:{
			type:Object
		}
	},
	methods:{
		show(){
			this.showFlag=true;
    	    this.selectType=ALL;
    	    this.onlyContent=true;
             this.$nextTick(()=>{ //food 组件调用BScroll滚动条
               if(!this.scoll){
             	  this.scroll=new BScroll(this.$refs.food,{
             	  	click:true
             	  });
             	}else{
             		this.scroll.refresh() 
             	}
             })
		},
		hide(){
			this.showFlag=false;
		}
		,
		addFirst(event){
			if(!event._constructed){ //取消2次点击的效果
			  console.log("kkkk")
				return;
			}
			  Vue.set(this.food, 'count', 1);
			//this.$emit("cart",event.target)//派发一个组件方法
		},
		needShow(type,text){
		   if(this.onlyContent && !text){ //是否
		   	return false;
		   }
		   if(this.selectType==ALL){ //选择所有的 
		   	return true;
		   }else{  //
		   	return type===this.selectType
		   }
			
		}
	}, 
	wacth:{
		 'ratingtype.select'(type) {
        this.selectType = type;
        this.$nextTick(() => {
          this.scroll.refresh();
        });
      },
      'content.toggle'(onlyContent) {
        this.onlyContent = onlyContent;
        this.$nextTick(() => {
          this.scroll.refresh();
        });
      }
		
	}
	,
    filters: {
      formatDate(time) {
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd hh:mm');
      }
    },
	
   components:{
     	cartcontrol,
     	split,
     	ratingselect
   }
   
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less"  scoped>
		.food{
			position: fixed;
			left: 0;
			top: 0;
			bottom: 48px;
			z-index: 30;
			width: 100%;
			background: #FFFFFF;
			&.move-enter,&.move-leave-active{
			   transition: all 0.65s linear;
               transform:translate3d(0, 0, 0);
			}
            &.move-enter-active,&.move-leave-to{
				transform:translate3d(100%, 0, 0)
            }
            .image-header{
            	position: relative;
            	width: 100%;
            	height: 0;
            	padding-top: 100%;
            	img{
            		position: absolute;
            		left: 0;
            		top: 0;
            		width: 100%;
            		height: 100%;
            	}
            	.back{
            	   position: absolute;
            	   top: 10px;
            	   left: 0;
            	   .icon-arrow_lift{
            	   	display:block;
            	   	padding:  10px;
					font-size: 20px;
					color: #FFFFFF;
            	   }
            	}
            }
            .content{
            	padding: 18px;
            	position: relative;
            	.title{
            		line-height: 14px;
            		margin-bottom: 8px;
            		font-size: 14px;font-weight: 700;
            		color: rgb(7,17,27);
            	}
            	.detail{
            		margin-bottom: 18px;
            		line-height: 10px;
            		line-height: 10px;
            		font-size: 0;
            		.sell-count,.rating{
            			font-size: 10px;
            			color: rgb(147,153,159);
            		}
            		.sell-count{
            			margin-right: 12px;
            		}
	             .price{
					font-weight: 700;
					line-height: 24px;
					.now{
					 	margin-right: 8px;
					 	font-size: 14px;
					 	color:rgb(240,20,20);
					 }
					.old{
					 	text-decoration: line-through;
					 	font-size: 10px;
					 	color:rgb(147,153,159) ;
					 }
				}
			 }
			 	.cartcontrol-wrapper{
				position: absolute;
				right:12px;
				bottom: 12px;
			}
			.buy{
				position: absolute;
				right: 18px;
				bottom: 18px;
				z-index: 10;
				height: 24px;
				line-height: 24px;
				padding: 0 12px;
				box-sizing: border-box;
				font-size: 10px;
				border-radius:12px ;
				background: rgb(0,160,220);
				color: #FFFFFF;
				&.fde-enter,&.fde-leave-active{
				  transition: all 0.1s linear;
	              opacity: 0;
				}
	            &.fde-enter-active,&.fde-leave-to{
					transition: opacity 0.1s;
	            }
			}
			}
		      .info{
		      	padding: 18px;
		      	.title{
		      		line-height: 14px;
		      		margin-bottom: 6px;
		      		font-size: 14px;
		      		color:rgb(7,17,27);
		      	}
		      	.text{
		      		line-height: 24px;
		      		padding: 0 8px ;
		      		font-size: 12px;
		      		color: rgb(77,85,93);
		      	}
		      }
		      .rating{
		      	  padding-top: 18px;
		      	  .title{
		      	  	line-height: 14px;
		      		margin-left: 18px;
		      		font-size: 14px;
		      		color:rgb(7,17,27);
		      	  }
		      	  .rating-wrapper{
		      	  	padding: 0 18px;
		      	  	.rating-item{
		      	  		position: relative;
		      	  		padding: 16px 0;
		      	  		&.border-bottom{
		      	  			border-bottom:rgba(7,17,27,0.1);
		      	  		}
		      	  		.user{
		      	  			position: absolute;
		      	  			right: 0;
		      	  			top: 16px;
		      	  			line-height: 12px;
		      	  			font-size: 0;
		      	  			.name{
		      	  				display: inline-block;
		      	  				vertical-align: top;
		      	  				font-size: 10px;
		      	  				color: rgb(147,153,159);
		      	  				margin-right: 6px;
		      	  			}
		      	  			.avatar{
		      	  				border-radius:50%;
		      	  			}
		      	  		}
		      	  		.time{
		      	  			margin-bottom: 6px;
		      	  			line-height: 12px;
		      	  			font-size: 10px;
		      	  			color: rgb(147,153,159);
		      	  		}
		      	  		.text{
		      	  			line-height: 16px;
		      	  			font-size: 12px;
		      	  			color: rgb(7,17,27);
		      	  			.icon-thumb_up,.icon-thumb_down{
		      	  				line-height: 16px;
		      	  				margin-right: 4px;
		      	  				font-size: 12px;
		      	  			}
		      	  			.icon-thumb_up{
		      	  				color: rgb(0,160,220);
		      	  			}
		      	  			.icon-thumb_down{
		      	  				color: rgb(147,153,159) ;
		      	  			}
		      	  		}
		      	  	}
		      	  	.no-rating{
		      	  		padding:  16px 0;
		      	  		font-size: 12px;
		      	  	    color: rgb(147,153,159) ;
		      	  	}
		      	  }
		      }
		}
</style>
